<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>按钮!!!</button>
  <script>
    const btn = document.querySelector('button');

    // 赋值点击事件,会被覆盖
    btn.onclick = () => {
      console.log("呀~~~~");
    };

    // 追加点击事件
    // addEventListener 不会被覆盖
    btn.addEventListener("click" ,function() {
      // function 函数的 this 可获取当前绑定事件的元素
      console.log("按钮被点击了 function 函数",this);
    });

    btn.addEventListener("click" , (e) => {
      // 箭头函数 通过 e.currentTarget 获取当前绑定事件的元素
      console.log("按钮被点击了 箭头函数",e.currentTarget);
    })
  </script>
</body>
</html>